<script setup lang="ts">
import { ref } from '@vue/reactivity';
import returnHeader from '../../components/returnHeader.vue';
import {useRouter} from "vue-router"
import { onBeforeMount } from '@vue/runtime-core';
const router = useRouter()
let input = ref('影风')
let imgUrl = ref()
onBeforeMount(() => {
  imgUrl.value = router.currentRoute.value.query.url
})
</script>

<template>
  <return-header :title="'编辑资料'" />
  <div class="editPersonalContent"> 
    <div class="title">基本信息</div>
    <div class="item">
      <div>头像</div>
      <div >
        <img class="avatuar" :src="imgUrl" alt="">
      </div>
    </div>
    <div class="item item-more">
      <div>背景</div>
      <div class="iconfont icon-xiangyou1"></div>
    </div>
    <div class="item item-more">
      <div>
        <span>昵称</span>
        <span class="userName">影风</span>
      </div>
      <div class="iconfont icon-bi"></div>
    </div>
  </div>
</template>

<style lang="less">
.editPersonalContent {
  margin-top: 60px;
  .title {
    padding: 10px;
    background-color: #e6e4e4;
  }
  .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dbdbdb;
    align-items: center;
    padding: 5px 20px;
    .userName {
      margin-left: 20px;
    } 
    .avatuar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .iconfont {
      color: #999;
    }
  }
  .item-more {
    padding: 15px 20px;
  }
}
</style>